<template>
  <div>
    <h1>栅格布局</h1>
    <hr>
      <el-row>
        <el-col :span="24">
          <div style="background-color: pink;">占一行</div>
        </el-col>
      </el-row>
      <!-- 如果列数超过了24，自动换行 -->
      <el-row>
        <el-col :span="12">
          <div style="background-color: pink;">1/2列1</div>
        </el-col>
        <el-col :span="12">
          <div style="background-color: pink;">1/2列2</div>
        </el-col>
        <el-col :span="12">
          <div style="background-color: pink;">1/2列2</div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <div style="background-color: purple;color: white;">列1</div>
        </el-col>
        <el-col :span="4">
          <div style="background-color: purple;color: white;">列1</div>
        </el-col>
        <el-col :span="4">
          <div style="background-color: purple;color: white;">列1</div>
        </el-col>
        <el-col :span="4">
          <div style="background-color: purple;color: white;">列1</div>
        </el-col>
        <el-col :span="4">
          <div style="background-color: purple;color: white;">列1</div>
        </el-col>
        <el-col :span="4">
          <div style="background-color: purple;color: white;">列1</div>
        </el-col>
      </el-row>
      <h2>响应式栅格</h2>
      <!-- 
      页面上有数据，
        大屏幕显示2列，1行
        小屏幕显示1列，2行
      -->
    <el-row>
      <el-col :xs="24" :sm="12">
        <div style="background-color: red;color: yellow">1111</div>
      </el-col>
      <el-col :xs="24" :sm="12">
        <div style="background-color: red;color: yellow">222</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>